<template>
  <el-form :model="formData" :label-width="width" ref="form1">
    <!-- 表单选项 -->
    <el-form-item
      v-for="(item, index) in formConfig"
      :key="index"
      :label="item.label"
      :label-width="item.width"
      :prop="item.field"
      :rules="item.rules">
      <!-- 收集数据
      思想:
      1-子收集
      2-后期通过子传父 ,通知父接收

      formData.uname
      formData.pwd

      formData.item.field 当对象的键是变量的时候使用数组语法

      -->
      <el-input
        type="text"
        :disabled="item.disabled"
        v-model="formData[item.field]"
        v-if="item.type === 'text'"></el-input>
      <!-- 密码框 -->
      <el-input
        type="password"
        :show-password="item.showPwd"
        v-model="formData[item.field]"
        v-if="item.type === 'password'"></el-input>
      <!-- 密码框 end -->
      <!-- select选择器 -->
      <el-select
        v-if="item.type === 'select'"
        v-model="formData[item.field]"
        placeholder="请选择">
        <el-option
          v-for="item in item.payload"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!-- select选择器end -->
    </el-form-item>
    <!-- 表单选项end -->

    <!-- 表单按钮 -->
    <el-form-item v-if="formBtns && formBtns.length">
      <el-button
        v-for="(item, index) in formBtns"
        :key="index"
        :type="item.type"
        :style="{ width: item.width || '70px' }"
        @click="submitFn(item.content)"
        >{{ item.content }}</el-button
      >
    </el-form-item>
    <!-- 表单按钮end -->
  </el-form>
</template>

<script>
export default {
  // 获取属性
  props: {
    width: {
      type: String,
      default: '0px'
    },
    formConfig: {
      type: Array,
      required: true
    },
    formBtns: Array

    // 表格通用的lable-width
    // width: '0px'
    // // 表格配置 一个对象代表后一个表格选项
    // formConfig: [
    //     {label: '标题',  width: '标题宽度', field: '标题字段', type: '输入框类型', rules: []}
    // ]
    // formBtns: [
    //     {content:'创建/更新/重置', type: 'primary/success/info/warning/danger', },
    //     {content:'创建/更新/重置', type: 'primary/success/info/warning/danger', },
    //     {content:'创建/更新/重置', type: 'primary/success/info/warning/danger', }
    // ]
  },
  // 模型数据
  data() {
    return {
      formData: {}
    };
  },
  methods: {
    submitFn(content) {
      if (content === '重置') {
        this.$refs.form1.resetFields();
      } else {
        //
        this.$refs.form1.validate((isSuccess) => {
          if (isSuccess) {
            this.$emit('submit', this.formData);
          }
        });
      }
    }
  }
};
</script>

<style></style>
